<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    // 在箭头函数出现之前，每一个新函数根据它是被如何调用的来定义这个函数的this值，非常令人讨厌
    // 箭头函数不会创建自己的this，它只会从自己的作用域链的上一层沿用this
    // 在开发中【使用箭头函数前需要考虑函数中this的值】，事件回调函数使用箭头函数时，this为全局的window，
    // 因此DOM事件回调函数为了简便，还是不太推荐使用箭头函数（特别是需要用到this的时候）

    /* // 1.以前的this指向：谁调用这个函数，this就指向谁
    console.log(this)  // window
    // 普通函数
    function fn() {
      console.log(this)  // window
    }
    fn()  // 实际上相当于 fn() === indow.fn()
    // 对象方法里面的this
    const obj = {
      uname: 'cxk',
      sayHi: function () {
        console.log(this)  // obj
      }
    }
    obj.sayHi() */


    /* // 2.箭头函数的this  是上一层 作用域 的this指向
    const fn = () => {
      console.log(this)  // window
    }
    fn()  // 箭头函数没有window，向上一层（script）找，全局作用域指向window
    // 对象方法箭头函数的this
    const obj = {
      uname: 'cxkk',
      sayHi: () => {
        console.log(this)  // this指向上一层作用域（全局），所以是window
      }
    }
    obj.sayHi()  // window */


    /* // 3.箭头函数不会创建自己的this，它只会从自己的作用域链的上一层沿用this
    const obj = {
      uname: 'cxkkk',
      sayHi: function () {
        let i = 10
        const count = () => {
          console.log(this)// obj  conut箭头函数作用域没有this，向上找普通函数function有this，是obj调用的
        }
        count()
      }
    }
    obj.sayHi() */
  </script>
</body>

</html>